<template>
  <main-tab-bar></main-tab-bar>
  <div>
    <div class="bgc_top">
      <img
        src="https://qnhyd.laigl.com/a03bb7dc6cdcffbd6057f48631ef2a71.png"
        alt=""
      />
      <div class="info">
        <div class="info_poto">
          <img
            v-if="
              headimgurl != null && headimgurl != undefined && headimgurl != ''
            "
            :src="headimgurl"
            alt=""
          />
          <img
            v-else
            src="https://qnhyd.laigl.com/3a13f64e5b7319fcddd9cd2b288db582.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <div class="info_name info">
      <div
        v-if="headimgurl != null && headimgurl != undefined && headimgurl != ''"
      >
        {{ nickname }}
      </div>
      <div v-else>{{ user_name }}</div>
      <div @click="toMyInfo">
        <img
          src="https://qnhyd.laigl.com/ae398da29444212d1a2e6e6537663c70.png"
          alt=""
        />
      </div>
    </div>
  </div>
  <div class="homepage">
    <div class="achievement">
      <div class="left">
        <div>
          <img
            src="https://qnhyd.laigl.com/171a692b5cf91334e245e41cb84d05cc.png"
            alt=""
          />
        </div>
        <div>我的成就</div>
      </div>
      <div class="right" @click="toAchievement">
        <img
          src="https://qnhyd.laigl.com/2f3876a72e620c4fc9e8d1e0c190f4e8.png"
          alt=""
        />
      </div>
    </div>

    <div class="achievement">
      <div class="left">
        <div>
          <img
            src="https://qnhyd.laigl.com/c86cef8960050c053cc8bf1ec05b8c5b.png"
            alt=""
          />
        </div>
        <div>我的发布</div>
      </div>
      <div class="right" @click="toMinepublish">
        <img
          src="https://qnhyd.laigl.com/2f3876a72e620c4fc9e8d1e0c190f4e8.png"
          alt=""
        />
      </div>
    </div>

    <div class="achievement">
      <div class="left">
        <div>
          <img
            src="https://qnhyd.laigl.com/8e48140bd17753fa6ac6111c528f554b.png"
            alt=""
          />
        </div>
        <div>联系我们</div>
      </div>
      <div class="right" @click="goContact">
        <a :href="'tel:' + telphone"
          ><img
            src="https://qnhyd.laigl.com/2f3876a72e620c4fc9e8d1e0c190f4e8.png"
            alt=""
        /></a>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import MainTabBar from "../../components/content/MainTabBar/MainTabBar.vue";
import { request } from "/@/network/request.js";
export default {
  data() {
    return {
      user_name: "请先登录",
      telphone: "13476509125",
      nickname: sessionStorage.getItem("nickname"),
      headimgurl: sessionStorage.getItem("headimgurl"),
    };
  },
  methods: {
    toMyInfo() {
      this.$router.push({
        path: "/myinfo",
      });
    },
    toAchievement() {
      this.$router.push({
        path: "/achievement",
      });
    },
    toMinepublish() {
      this.$router.push({
        path: "/minepublish",
      });
    },
    async getUserInfo() {
      try {
        const res = await request({
          url: "v1.ucenter/getUserInfo",
          data: {
            openid: sessionStorage.getItem("openid"),
          },
        });
        if(res.code == 200){
            this.nickname = res.data.row.user_nickname
            this.headimgurl = res.data.row.avatar
        }else{
          Toast(res.msg)
        }
      } catch (error) {}
    },
  },
  mounted() {
    this. getUserInfo()
  },
  components: {
    MainTabBar,
  },
};
</script>

<style  scoped>
.bgc_top {
  position: relative;
  margin-bottom: 2.933vw;
}
.bgc_top img {
  width: 100vw;
  height: 51.467vw;
}
.info {
  position: absolute;
  top: 12vw;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.info_poto {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-appearance: none;
  overflow: hidden;
}
.info_poto img {
  width: 23.733vw;
  height: 23.733vw;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-appearance: none;
}
.info_name {
  display: flex;
  /* width: 120px; */
  overflow: hidden;
  /* text-align: center; */
  justify-content: center;
  /* padding-left: 2.667vw; */
  font-size: 5.867vw;
  top: 37.333vw;
}
.info_name p {
  margin: 0;
  display: block;
  width: 34.667vw;
  overflow: hidden;
  text-overflow: ellipsis; /* 加省略号 */
  white-space: nowrap; /* 强制不换行 */
}
.info_name img {
  width: 4.267vw;
  height: 4.267vw;
  margin-left: 1.333vw;
}
.info_name {
  display: flex;
  justify-content: center;
  /* padding-left: 2.667vw; */
  font-size: 5.867vw;
  top: 37.333vw;
}
.info_name img {
  width: 4.267vw;
  height: 4.267vw;
  margin-left: 1.333vw;
}
.homepage {
  width: 92.8vw;
  height: 114.667vw;
  /* background-color: rgb(114, 67, 67); */
  margin: 0 auto;
}
.achievement {
  display: flex;
  height: 15.733vw;
  align-items: center;
  border-bottom: solid 0.267vw rgb(229, 229, 229);
}
.left {
  flex: 4;
  height: 100%;
  display: flex;
  line-height: 15.733vw;
  align-items: center;
  font-size: 4vw;
  font-weight: bold;
}
.left img {
  width: 5.867vw;
  display: block;
  margin: 0 auto;
  /* padding-top: 13.333vw; */
  margin-right: 2.667vw;
}
.right {
  /* flex: 6; */
  width: 55.467vw;
  height: 15.733vw;
  text-align: right;
  line-height: 14vw;
  text-align: right;
  position: relative;
}
.right a {
  display: block;
  width: 100% !important;
  height: 15.733vw !important;
}
.right img {
  width: 4.267vw;
  position: absolute;
  display: block;
  right: 0;
  bottom: 5.333vw;
  /* margin: 0 auto; */
  /* margin */
}
</style>